<template>
  <div class="container">
    <el-card class="box-card">
      <el-descriptions title="订单信息">
        <el-descriptions-item label="订单类型">{{ form.orderType }}</el-descriptions-item>
        <el-descriptions-item label="订单金额">{{ form.payMoney }}</el-descriptions-item>
        <el-descriptions-item label="订单状态">
          <el-tag size="small">{{ form.status }}</el-tag>
          <el-button type="primary" size="small" style="margin-left:20px" @click="dialogVisible = true">修改状态</el-button>
        </el-descriptions-item>
        <el-descriptions-item label="起点" v-if="form.startAddress">{{
  form.startAddress }}</el-descriptions-item>
        <el-descriptions-item label="目的地">{{ form.endAddress }}</el-descriptions-item>
        <template v-for="item in orderInfo">
          <el-descriptions-item v-if="item.key === '图片'" :label="item.key">
            <el-image style="width: 30px; height: 30px" :src="item.value" :preview-src-list="[item.value]">
            </el-image>
          </el-descriptions-item>
          <el-descriptions-item v-else-if="item.key === '打印附件'" :label="item.key">
            <el-link type="primary" v-for="(file,i) in item.value" :key="file" :href="file" target="_blank">附件{{ i + 1
  }}</el-link>
          </el-descriptions-item>
          <el-descriptions-item v-else :label="item.key">{{ item.value }}</el-descriptions-item>
        </template>
      </el-descriptions>
    </el-card>
    <div class="personInfo">
      <el-card class="box-card">
        <el-descriptions class="margin-top" title="发单人" :column="2" border>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              昵称
            </template>
            {{ form.userInfo?form.userInfo.nickName:'' }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              手机号
            </template>
            {{ form.userInfo?(form.userInfo.phone?form.userInfo.phone:'未填写手机号'):'未填写手机号' }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline"></i>
              发单时间
            </template>
            {{ form.publicTime }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
      <el-card class="box-card">
        <el-descriptions class="margin-top" title="接单人" :column="2" border v-if="form.acceptMan">
          <template>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                昵称
              </template>
              {{ form.acceptManInfo[0].nickName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-mobile-phone"></i>
                手机号
              </template>
              {{ form.acceptManInfo[0].phone?form.acceptManInfo[0].phone:'未填写手
机号' }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-location-outline"></i>
                发单时间
              </template>
              {{ form.acceptTime }}
            </el-descriptions-item>
          </template>
        </el-descriptions>
        <div style="margin-top:50px;color:#c8c8c8;" v-else>
          暂时无人接单
        </div>
      </el-card>
    </div>
    <el-dialog title="修改订单状态" :visible.sync="dialogVisible" width="30%">
      <el-select v-model="value" placeholder="请选择">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateStatus">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { formatOrderInfo } from '../utils/util'
export default {
  data() {
    return {
      form: {},
      orderInfo: '',
      _id: '',
      dialogVisible: false,
      options: [
        {
          value: '待帮助',
          label: '待帮助'
        },
        {
          value: '已帮助',
          lable: '已帮助'
        },
        {
          value: '已完成',
          lable: '已完成'
        },
        {
          value: '已关闭',
          label: '已关闭'
        }
      ],
      value: ''
    }
  },
  created() {
    const { _id } = this.$route.params
    this._id = _id
    this.getOrderDetail(_id)
  },
  methods: {
    getOrderDetail(id) {
      this.$http
        .get('/orderDetail', {
          params: {
            id
          }
        })
        .then(res => {
          // console.log(res)
          if (res.data.status === 'success') {
            this.form = res.data.result[0]
            this.orderInfo = formatOrderInfo(res.data.result[0])
          } else {
            this.$message.error('读取错误')
            this.$router.push({
              name: 'Order'
            })
          }
        })
        .catch(err => {
          this.$message.error('读取错误')
          this.$router.push({
            name: 'Order'
          })
        })
    },
    updateStatus() {
      //判断是否选择订单状态value
      if (this.value) {
        this.dialogVisible = false
        this.$http
          .post('/updateOrder', {
            id: this._id,
            status: this.value
          })
          .then(res => {
            if (res.data == 'success') {
              this.$message.success('修改成功')
              this.getOrderDetail(this._id)
            } else {
              this.$message.error('服务器错误')
            }
          })
          .catch(err => {
            console.log(error)
            this.$message.error('服务器错误')
          })
      } else {
        this.$message.error('请选择订单状态')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  background-color: #fff;
  padding: 10px;
  .personInfo {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    .box-card {
      width: 49%;
    }
  }
}
</style>